<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.all{
				width: 100%;
				height: 1226px;
			}
			.top{
				width: 100%;
				height: 80px;
				background-color: azure;
			}
			.block{
				width: 100%;
				height: 40px;
				background-color: #333;
			}
			.blockleft{
				float: left;
			}
			.blockright{
				float: right;
			}
			.white{
				width: 80%;
				height: 80px;
				background-color:grey;
				margin: 0 auto;
				margin-top: 10px;
			}
			.one{
				width: 80%;
				height: 400px;
				margin: 0 auto;
				margin-top: 0.9375rem;
			}
			.oneleft{
				width: 30%;
				height: 400px;
				float: left;
				background-color: plum;
				
			}
			.oneright{
				width:70%;
				height: 400px;
				float: right;
				background-color: aquamarine;
			}
			.two{
				width: 80%;
				height: 200px;
				margin: 0 auto;
				margin-top: 1%;
			}
			.two1{
				width: 283px;
				height: 200px;
				float: left;
				background-color: aqua;
			}
			.two2{
				width:283px;
				height: 200px;
				float: left;
				background-color: aqua;
				margin-left: 0.5rem;
	
			}
			.two3{
				width: 283px;
				height: 200px;
				float: left;
				background-color: aqua;
				margin-left: 0.5rem;
			}
			.two4{
				width: 283px;
				height: 200px;
				float: left;
				background-color: aqua;
				margin-left: 0.5rem;
			}
			.three{
					width: 80%;
					height: 130px;
					margin: 0 auto;
					margin-top: 2%;
					background-color: #333;
			}
			.four{
				width: 80%;
				height: 80px;
				margin: 0 auto;
				background-color: plum;
			}
			.fourleft{
				width: 30%;
				height:80px;
				float: left;
			}
			.fourright{
				width: 70%;
            	height: 80px;
				float: right;
				}
		    .five{
				width: 80%;
				height:500px;
				margin: 0 auto;
				margin-top: 1%;
			}
			.fiveleft{
				width: 29%;
				height:500px;
				float: left;
				background-color: chocolate;
			}
			.fiveright{
				width: 70%;
				height:500px;
                float: left;
				margin-left: 1%;
			}
			.fiveright-top{
				width: 100%;
				height:250px;
			}
			.fiveright-bottom{
				width: 100%;
				height:242px;
				margin-top: 1%;
			}
			.fr-t1{
				width: 194px;
				height: 242px;
				float: left;
				background-color: aqua;
			}
			.fr-t2{
				width: 194px;
				height: 250px;
				background-color: aqua;
				float: left;
				margin-left: 8px;
			}
			.fr-t3{
				width: 194px;
				height: 242px;
				float: left;
				background-color: aqua;
				margin-left: 8px;
			}
			.fr-t4{
					width: 194px;
					height: 242px;
					float: left;
					background-color: aqua;
					margin-left: 8px;
				}
			.fr-b1{
				width:194px;
				height: 242px;
				float: left;
				background-color: pink;
			}
			.fr-b2{
				width: 194px;
				height: 242px;
				float: left;
				background-color: pink;
				margin-left: 8px;
			}
			.fr-b3{
				width: 194px;
				height: 242px;
				float: left;
				background-color: pink;
				margin-left: 8px;
			}
			.fr-b4{
				width: 194px;
				height: 242px;
				float: left;
				background-color: pink;
				margin-left: 8px;
			}
		</style>
	</head>
	<body>
		<div class="all">
		  <div class="top"></div>
		  <div class="block">
			  <div class="blockleft">
				  <a href="#">mi<span>|</span></a>
			  </div>
			  <div class="blockright"></div>
		  </div>
		  <div class="white"></div>
		  <div class="one">
			  <div class="oneleft"></div>
			  <div class="oneright"></div>
		  </div>
		  <div class="two">
			  <div class="two1"></div>
			  <div class="two2"></div>
			  <div class="two3"></div>
			  <div class="two4"></div>
		  </div>
		  <div class="three"></div>
		  <div class="four">
			  <div class="fourleft"></div>
			  <div class="fourright"></div>
		  </div>
		  <div class="five">
			  <div class="fiveleft"></div>
			  <div class="fiveright">
				  <div class="fiveright-top">
					  <div class="fr-t1"></div>
					   <div class="fr-t2"></div>
					    <div class="fr-t3"></div>
						 <div class="fr-t4"></div>
				  </div>
				  <div class="fiveright-bottom">
					  <div class="fr-b1"></div>
					   <div class="fr-b2"></div>
					    <div class="fr-b3"></div>
					  <div class="fr-b4"></div>
				  </div>
			  </div>
		  </div>
		  
		</div>
	</body>
</html>
